<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>书籍列表</title>
  <!-- 引入layui的CSS文件 -->
  <link rel="stylesheet" th:href="@{/css/layui.css}">
  <!-- 引入layui的JavaScript文件 -->
  <script th:src="@{/js/layui.js}"></script>
  <script th:src="@{/js/jquery-3.7.1.min.js}"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 0;
      padding: 20px;
      color: #333;
    }
    h1 {
      text-align: center;
      color: #4CAF50;
      margin-bottom: 20px;
    }
    .actions {
      text-align: center;
      margin-bottom: 20px;
    }
    .actions input, .actions button {
      padding: 10px;
      font-size: 14px;
      margin: 5px;
    }
    table {
      width: 80%;
      margin: 0 auto;
      border-collapse: collapse;
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }
    th, td {
      padding: 12px;
      text-align: left;
    }
    th {
      background-color: #4CAF50;
      color: white;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:hover {
      background-color: #e0e0e0;
    }
    td {
      border-bottom: 1px solid #ddd;
    }
    .btn {
      padding: 5px 10px;
      font-size: 12px;
      color: white;
      background-color: #4CAF50;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
    .btn-edit {
      background-color: #2196F3;
    }
    .btn-delete {
      background-color: #f44336;
    }
  </style>
</head>
<body>

<h1>书籍列表</h1>

<div class="actions">
  <input type="text" placeholder="查找书籍..." id="search">
  <button class="btn" onclick="searchBook()">搜索</button>
  <button class="btn" onclick="openForm()">新增书籍</button>
</div>
<table>
  <tr>
    <th>书名</th>
    <th>价格</th>
    <th>作者</th>
    <th>操作</th>
  </tr>
  <div th:each="book : ${books}">
  <tr th:id="${book.bookId}">
    <td th:text="${book.bookName}">书名</td>
    <td th:text="${book.bookPrice}">价格</td>
    <td th:text="${book.bookAuthor}">作者</td>
    <td>
      <button class="btn btn-edit" th:onclick="|openForm(${book.bookId})|">编辑</button>
      <button class="btn btn-delete" th:onclick="deleteBook([[${book.bookId}]])">删除</button>
    </td>
  </tr>
  </div>
</table>

<!-- 弹出层表单 -->
<div id="bookForm" style="display: none;">
  <form class="layui-form" id="formBook" style="padding: 20px;">
    <input type="hidden" name="bookId" id="bookId">
    <div class="layui-form-item">
      <label class="layui-form-label">书名</label>
      <div class="layui-input-block">
        <input type="text" name="bookName" id="bookName" required lay-verify="required" placeholder="请输入书名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">价格</label>
      <div class="layui-input-block">
        <input type="text" name="bookPrice" id="bookPrice" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">作者</label>
      <div class="layui-input-block">
        <input type="text" name="bookAuthor" id="bookAuthor" required lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
      </div>
    </div>
  </form>
</div>

<button onclick="test()">点击</button>

<script>


  function test(){
    $.ajax({
      url:"/user/update",
      type:"UPDATE",
      contentType:"application/json",
      data:{user:"wwh"},
      success:function (response){
        alert("success");
      },
      error:()=>{
        alert("error")
      }
    })
  }

  layui.use(['form', 'layer'], function(){
    var form = layui.form;
    var layer = layui.layer;

    // 监听表单提交
    form.on('submit(submitForm)', function(data){



      var formData = data.field;
      if (formData.bookId) {
        console.log('修改书籍', formData); // 修改书籍逻辑



      } else {
        console.log('新增书籍', formData); // 新增书籍逻辑
        // 这里可以添加新增书籍的逻辑
        window.location = "/user/add";
      }
      layer.closeAll(); // 关闭弹出层
      return false;
    });
  });


  function searchBook() {
    var searchQuery = document.getElementById('search').value;
    // 在这里添加查找书籍的逻辑
    console.log('搜索书籍：' + searchQuery);
  }

  function openForm(bookId) {
    var form = document.getElementById('formBook');
    form.reset(); // 重置表单
    form.bookId.value = ''; // 重置隐藏的id字段

    if (bookId) {
      // 在这里加载书籍信息
      form.bookId.value = bookId; // 设置隐藏的id字段
      // 示例：填充表单数据（这里可以从服务器加载数据）
      let row = document.getElementById(bookId);
      let tds = row.getElementsByTagName('td');
      form.bookName.value = tds[0].textContent.trim();
      form.bookName.placeholder = tds[0].textContent.trim();
      form.bookPrice.value = tds[1].textContent.trim();
      form.bookPrice.placeholder = tds[1].textContent.trim();
      form.bookAuthor.value = tds[2].textContent.trim();
      layui.form.render(); // 渲染表单
    }

    layer.open({
      type: 1,
      title: bookId ? '编辑书籍' : '新增书籍',
      content: document.getElementById('bookForm').innerHTML,
      area: ['500px', '300px'],
      success: function() {
        layui.form.render(); // 渲染表单
      }
    });
  }

  function deleteBook(bookId) {
    // 在这里添加删除书籍的逻辑
    console.log('删除书籍ID：' + bookId);

    window.location = "/user/del/"+bookId;
  }
</script>

</body>
</html>
